CSS Full Course Day 10 [Hindi] 💻 | Grid Basics for Responsive Design 🚀 | Mohit Decodes
🧩 CSS Tutorial – Day 10: Grid Basics for Responsive Design
Welcome to Day 10 of the CSS Full Course [Hindi] by Mohit Decodes! Today we’ll learn the fundamentals of CSS Grid — a powerful layout system for building responsive web designs.
🔹 What is CSS Grid?
CSS Grid allows you to create complex two-dimensional layouts using rows and columns, making responsive designs easier and more intuitive.
🔹 Key CSS Grid Concepts
- Grid Container: The parent element with
display: grid
- Grid Items: The direct children inside the grid container
🔹 Basic Grid Properties
Property (on container)Description | |
display: grid; | Enables grid layout |
grid-template-columns | Defines number and width of columns |
grid-template-rows | Defines number and height of rows |
grid-gap or gap | Sets spacing between grid items |
justify-items | Align items horizontally inside cells |
align-items | Align items vertically inside cells |
⚙️ Example CSS:
css
CopyEdit
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
background-color: #f9f9f9;
padding: 20px;
}
.item {
background-color: #8bc34a;
padding: 30px;
color: white;
font-size: 20px;
text-align: center;
}
💡 Why Use CSS Grid?
- Perfect for creating two-dimensional layouts (both rows & columns)
- Simplifies complex page layouts without floats or positioning
- Easily builds responsive designs by adjusting grid-template-columns